<template>
	<ComIndex ref="commonIndexRef" :showFilter="false" :toggleView="false" :isInitList="false">
		<template #search>
			<Search :showSearch="false" :breadCrumb="{name: form?.id ? form?.name : $t('dataModel.addField'), breadList: [fielddetailViewRef?.bizInfo?.menuType === 0 ? 'dataModel' : 'fieldModel', 'settingField','settingFieldDetail']}">
				<template #right>
					<div>
						<a-button @click="close">取消</a-button>
						<a-button type="primary" @click="saveData" :loading="loading"><icon-save />保存</a-button>
					</div>
				</template>
			</Search>
		</template>
		<div class="detail-box" style="padding: 14px">
			<ComTitle title1="1. 选择字段类型" title2="基础" title3="选择你所需的基础字段类型" />
			<ComCheck :options="fieldType" v-model="form.fieldType" />
			<ComTitle style="margin-top: 24px" title2="关系" title3="与另一个数据模型对象建立关关系，或Json、数组、API方式建立关系" />
			<ComCheck :options="fieldRelation" v-model="form.fieldType" />
			<ComTitle style="margin-top: 24px" title1="2. 配置字段" title2="图标和名称" title3="选择字段的图标和输入字段的名称" />
			<Transition name="fade" enter-active-class="animate__animated animate__fadeIn">
				<fieldDetailView :formData="form" :bizId="bizId" :groupId="groupId" ref="fielddetailViewRef"  :key="form.fieldType" :type="form.fieldType"></fieldDetailView>
			</Transition>
		</div>
	</ComIndex>
</template>
<script lang="ts" setup>
import ComIndex from "@/components/ComIndex/Index.vue";
import ComTitle from "@/components/ComTitle.vue";
import ComCheck from "@/components/ComCheck.vue";
import { useField, useFieldRelation } from "@/utils/field";
import fieldDetailView from "./components/fieldDetailView.vue";
import { addField, updateField, queryConfig } from "@/api/customerManage/setting";
const fieldRelation = useFieldRelation();
const fieldType = useField();
const router = useRouter();
const route = useRoute();
const commonIndexRef = ref(null);
const form: any = ref({});
const reset = () => {
	form.value = {
		fieldType: fieldType[0].value,
		dataType: 0,
	};
};

const close = () => {
	router.go(-1);
};
const fielddetailViewRef = ref({});
const loading = ref(false);
const saveData = async () => {
	const data = await fielddetailViewRef.value.getForm();
	if (!data) return;
	const obj = {
		...form.value,
		...data,
		bizId: bizId.value,
		groupId: groupId.value
	};
	try {
		loading.value = true;
		const api = configId.value ? updateField : addField;
		await api(obj);
		close();
	} catch (error) {
	} finally {
		loading.value = false;
	}
};

const getDetail = async () => {
	const data = await queryConfig({
		id: configId.value
	});
	form.value = data;
};

const bizId: any = ref("");
const groupId: any = ref("");
const configId: any = ref("");

watch(
	() => route.query,
	(data) => {
		reset();
		if (data?.bizId) {
			bizId.value = data.bizId;
			groupId.value = data.groupId;
			configId.value = data.configId;
			if (configId.value) {
				getDetail();
			}
		}
	},
	{ immediate: true }
);
</script>

<style scoped lang="scss">
.animate__animated.animate__fadeIn {
	animation-duration: 0.2s;
}
</style>
